<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import infomask from './component/infomask.vue'
	import { useUsercodeStore } from '@/store/usercode.js'
	import { parseTime } from '@/utils/index.js'

	const userCodeStore = useUsercodeStore()

	const blindboxId = ref()
	const boxId = ref()
	//弹幕
	const barrageTopInfo = ref([])
	const barrageBottomInfo = ref([])
	// 三个轮播
	const threeAction = ref([])
	// 概率展示
	const showProbality = ref([])
	//商品
	const goodsList = ref([])
	const boxDetailInfo = ref()
	// 优惠券
	const couponId = ref(0)
	const couponname = ref('')
	const couponType = ref(-1)

	// 盲盒详情
	const isReservation = ref(0)
	async function getblindboxDetail() {
		const res = await http.request({
			url: '/api/box/boxDetails',
			method: 'POST',
			data: {
				id: blindboxId.value,
				case_id: 0,
			},
		})
		console.log(res)
		boxId.value = res.data.box.id
		// 弹幕
		res.data.log.forEach((item, index) => {
			if (index <= Math.floor(res.data.log.length / 2)) {
				barrageTopInfo.value.push(item)
			} else {
				barrageBottomInfo.value.push(item)
			}
		})
		console.log('barr')
		console.log(barrageBottomInfo.value.length != 0)
		//三个轮播
		for (let i = 0; i < 6; i++) {
			threeAction.value.push(res.data.goods_info[i])
		}
		// 概率展示
		showProbality.value = res.data.box.probability_show
		//商品
		goodsList.value = res.data.goods_info
		boxDetailInfo.value = res.data.box
		isReservation.value = res.data.is_subscription
	}

	// 三个轮播
	setInterval(() => {
		let firstElement = threeAction.value.shift()

		// 将该元素添加到数组的末尾
		threeAction.value.push(firstElement)
	}, 6000)

	//去我的奖品
	function toMyReward() {
		uni.switchTab({
			url: '/pages/bag/index',
		})
	}

	// 规则
	const rulepopup = ref()
	function rulePOP() {
		getRules(4)
		rulepopup.value.open('bottom')
	}

	// 出奖记录
	const currentId = ref(1)
	const historyPage = ref(1)
	const historyList = ref([])
	const historypopup = ref()
	function wxHistory() {
		currentId.value = 1
		historyPage.value = 1
		historyList.value = []
		getHistoryList()
		historypopup.value.open('bottom')
	}

	function closeHistory() {
		currentId.value = 1
		historyPage.value = 1
		historyList.value = []
		historypopup.value.close('bottom')
	}

	async function getHistoryList() {
		const res = await http.request({
			url: '/api/box/winLog',
			method: 'POST',
			data: {
				page: historyPage.value,
				limit: 10,
				rule_id: currentId.value,
				id: boxId.value,
			},
		})
		console.log(res)
		historyList.value = [...historyList.value, ...res.data]
	}

	//切换历史记录
	function getItemHistoryList(id) {
		currentId.value = id
		historyPage.value = 1
		historyList.value = []
		getHistoryList()
	}

	//触底刷新
	function historyListLower() {
		++historyPage.value
		getHistoryList()
	}

	function changeAgree() {
		agree.value = !agree.value
	}
	// 查看奖品详情
	const showmask = ref(false)
	const maskindex = ref(0)
	function goodsinfo(index) {
		showmask.value = true
		maskindex.value = index
	}
	// 关闭mask
	function closeMask() {
		showmask.value = false
	}

	//预约
	async function reservationWX() {
		if (isReservation.value == 1) {
			return
		}
		const res = await http.request({
			url: '/api/box/ysPost',
			method: 'POST',
			data: {
				id: boxId.value,
			},
		})
		console.log(res);
		if (res.st == 1) {
			isReservation.value = 1
			uni.utils.toast('订阅成功')
		} else {
			uni.utils.toast('订阅失败')
		}
	}

	// 规则
	const ruleStrings = ref('')
	async function getRules(id) {
		const res = await http.request({
			url: '/api/index/getDetails',
			method: 'POST',
			data: {
				id: id,
			},
		})
		console.log(res)
		ruleStrings.value = res.data.details
	}

	onLoad((option) => {
		blindboxId.value = option.id
	})
	onShow(() => {
		getblindboxDetail()
		uni.$once('thecoupon', (data) => {
			console.log(data)
			realmoney.value = paymoney.value
			if (data.coupon) {
				couponId.value = data.coupon.id
				couponname.value = data.coupon.title
				// 满减
				if (data.coupon.type == 1) {
					realmoney.value = paymoney.value - data.coupon.money
				} else if (data.coupon.type == 2) {
					realmoney.value = paymoney.value - data.coupon.money
				} else if (data.coupon.type == 3) {
					realmoney.value = paymoney.value * data.coupon.discount
				}
			}
		})
	})
</script>

<template>
	<view class="wx-content">
		<scroll-view scroll-y="true" class="scroll-Y" style="height: 100vh">
			<view class="" style="padding-bottom: 214rpx; padding-top: 32rpx">
				<view class="wx-barrage" v-if="barrageTopInfo.length != 0">
					<view class="barrage-content">
						<view class="barrage-top">
							<view
								class="barrage-item"
								v-for="(item, index) in barrageTopInfo"
								:key="'topbarrage' + index"
							>
								<image
									style="
										width: 41rpx;
										height: 41rpx;
										border-radius: 50%;
										margin-right: 8rpx;
									"
									:src="item.himg"
									mode=""
								></image>
								<text>{{
									`${item.nickname}抽中了${item.goods_name}`
								}}</text>
							</view>
						</view>
						<view class="barrage-bottom">
							<view
								class="barrage-item"
								v-for="(item, index) in barrageTopInfo"
								:key="'bottombarrage' + index"
							>
								<image
									style="
										width: 41rpx;
										height: 41rpx;
										border-radius: 50%;
										margin-right: 5rpx;
									"
									:src="item.himg"
									mode=""
								></image>
								<text>{{
									`${item.nickname}抽中了${item.goods_name}`
								}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="wx-top-content">
					<view class="rules" @click="rulePOP"> 规则 </view>
					<view class="wx-history" @click="wxHistory">出奖记录</view>
					<view class="my-reward" @click="toMyReward"> </view>
					<view class="content-top"> {{ boxDetailInfo.name }} </view>
					<view class="content-list">
						<view class="left">
							<image
								:src="threeAction[0].img"
								style="width: 100rpx"
								mode="widthFix"
							></image>
							<view class="left-name">
								<uni-notice-bar
									:speed="10"
									color="#fff"
									background-color="transparent"
									scrollable
									:text="threeAction[0].goods_name"
								/>
							</view>
						</view>
						<view class="center">
							<image
								:src="threeAction[1].img"
								style="width: 150rpx"
								mode="widthFix"
							></image>
							<view class="center-name">
								<uni-notice-bar
									:speed="10"
									color="#fff"
									background-color="transparent"
									scrollable
									:text="threeAction[1].goods_name"
								/>
							</view>
						</view>
						<view class="right">
							<image
								:src="threeAction[2].img"
								style="width: 100rpx"
								mode="widthFix"
							></image>
							<view class="right-name">
								<uni-notice-bar
									:speed="10"
									color="#fff"
									background-color="transparent"
									scrollable
									:text="threeAction[2].goods_name"
								/>
							</view>
						</view>
					</view>
				</view>
				<view class="wx-center-content">
					<!-- <view class="top-text"> </view> -->
					<view class="bottom-text">
						<text>100%中奖</text>
						<text>{{
							`价值${Number(
								boxDetailInfo.min_price
							).toFixed()}~${Number(
								boxDetailInfo.max_price
							).toFixed()}元`
						}}</text>
					</view>
				</view>
				<!-- <view class="probability"> - 各款式获得概率 - </view> -->
				<view class="scroll-probability">
					<view class="scroll-H-view">
						<scroll-view class="scroll-view_H" scroll-x="true">
							<view
								class="scroll-view-item_H"
								v-for="(item, index) in showProbality"
								:key="'probality' + index"
							>
								<text class="probability-top">
									{{ Object.keys(item)[0] }}
								</text>
								<text class="probability-bottom">
									{{ item[Object.keys(item)] + '%' }}
								</text>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="scroll-content">
					<!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
					<view class="scroll-Y-view">
						<view
							v-for="(item, index) in goodsList"
							:key="'goodslist' + item.id"
							@click="goodsinfo(index)"
							class="scroll-view-item"
							:class="{
								'orange-bg': item.rule_id == '1',
								'pink-bg': item.rule_id == '2',
								'blue-bg': item.rule_id == '3',
								'white-bg': item.rule_id == '4',
							}"
						>
							<image
								style="height;: 120rpx"
								:src="item.img"
								mode="heightFix"
							></image>
							<view class="goodslist-name">
								{{ item.goods_name }}
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
				</view>
			</view>
		</scroll-view>
		<!-- 底部 -->
		<view class="wx-bottom">
			<view
				class="reservation"
				:class="{
					'reservation-bg': isReservation == 0,
					'reservation-bg-ok': isReservation == 1,
				}"
				@click="reservationWX"
			>
			</view>
			<view class="abandon">
				开售时间：{{ parseTime(boxDetailInfo.ys_time) }}
			</view>
		</view>

		<infomask
			v-if="showmask"
			@close-mask="closeMask"
			:maskindex="maskindex"
			:thegoods="goodsList"
			:boxId="boxId"
		></infomask>

		<!-- 规则弹出层 -->
		<uni-popup ref="rulepopup" type="bottom">
			<view class="rulepopup-content">
				<view
					class=""
					style="
						color: #fff;
						width: 100%;
						text-align: center;
						line-height: 128rpx;
					"
				>
					规则
				</view>
				<scroll-view scroll-y="true" style="height: 70vh">
					<view
						style="
							width: 94%;
							margin: 0 auto;
							color: #aca1ea;
							padding-bottom: env(safe-area-inset-bottom);
						"
						class=""
					>
						<rich-text :nodes="ruleStrings"></rich-text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 出奖记录弹出层 -->
		<uni-popup ref="historypopup" type="bottom">
			<view class="historypopup-content">
				<view class="close-historypopup" @click="closeHistory"> </view>
				<view class="historypopup-content-title"> 出奖记录 </view>
				<view class="scroll-category">
					<view class="scroll-H-view">
						<scroll-view class="scroll-view_H" scroll-x="true">
							<view
								class="scroll-view-item_H"
								v-for="(item, index) in boxDetailInfo.ruleArr"
								:key="'history' + index"
								@click="getItemHistoryList(item.rule_id)"
							>
								<!-- <text class="probability-top">
									{{ Object.keys(item)[0] }}
								</text>
								<text class="probability-bottom">
									{{ item[Object.keys(item)] + '%' }}
								</text> -->
								<view
									class="history-aim"
									:style="[
										{
											display:
												item.rule_id == currentId
													? 'block'
													: 'none',
										},
									]"
								>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="history-list">
					<scroll-view
						scroll-y="true"
						class="scroll-Y"
						style="height: 61vh"
						@scrolltolower="historyListLower"
					>
						<view
							class="history-item"
							v-for="(item, index) in historyList"
							:key="'historylist' + item"
						>
							<image
								:src="item.himg"
								style="
									width: 94rpx;
									height: 94rpx;
									border-radius: 50%;
									flex-shrink: 0;
								"
								mode=""
							></image>
							<text>{{ item.nickname[0] }}****</text>
							<text
								class="history-name"
								style="width: 52%; font-size: 23rpx"
								>{{ item.goods_name }}</text
							>
							<image
								:src="item.goods_img"
								style="
									width: 94rpx;
									height: 94rpx;
									border-radius: 10rpx;
									flex-shrink: 0;
								"
								mode=""
							></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	// 卡片背景
	.orange-bg {
		background: url('https://ojqn.wm2177.com/wechat_imgs/orange-bg.png')
			no-repeat;
		background-size: contain;
	}
	.pink-bg {
		background: url('https://ojqn.wm2177.com/wechat_imgs/pink-bg.png')
			no-repeat;
		background-size: contain;
	}
	.blue-bg {
		background: url('https://ojqn.wm2177.com/wechat_imgs/blue-bg.png')
			no-repeat;
		background-size: contain;
	}
	.white-bg {
		background: url('https://ojqn.wm2177.com/wechat_imgs/white-bg.png')
			no-repeat;
		background-size: contain;
	}
	@keyframes scroll {
		0% {
			transform: translateX(0); /* 初始位置 */
		}
		100% {
			transform: translateX(-100%); /* 终点位置 */
		}
	}
	.wx-content {
		height: 100vh;
		background-color: #1a133f;
		color: white;
		overflow: hidden;
		.wx-barrage {
			height: 124rpx;
			overflow: hidden;
			.barrage-content {
				height: 139rpx;
				animation: scroll 30s linear infinite; /* 滚动动画 */
				.barrage-top {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.barrage-item {
						margin-right: 51rpx;
						&:nth-child(2n) {
							background-color: rgba(247, 251, 139, 0.5);
						}
						&:nth-child(3n) {
							background-color: rgba(243, 184, 115, 0.5);
						}
						&:nth-child(4n) {
							background-color: rgba(66, 46, 109, 0.5);
						}
					}
				}
				.barrage-bottom {
					display: flex;
					align-items: center;
					.barrage-item {
						margin-left: 51rpx;
						background-color: rgba(247, 251, 139, 0.5);
						&:nth-child(2n) {
							background-color: rgba(243, 184, 115, 0.5);
						}
						&:nth-child(3n) {
							background-color: rgba(66, 46, 109, 0.5);
						}
						&:nth-child(4n) {
							background-color: rgba(251, 150, 224, 0.5);
						}
					}
				}
				.barrage-item {
					display: inline-flex;
					align-items: center;
					flex-shrink: 0;
					height: 48rpx;
					padding: 8rpx;
					box-sizing: border-box;
					border-radius: 24rpx;
					background-color: rgba(251, 150, 224, 0.5);
					text {
						font-size: 20rpx;
					}
				}
			}
		}
		.wx-top-content {
			position: relative;
			z-index: 1;
			height: 402rpx;
			background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-content.png')
				no-repeat;
			background-size: 100%;
			.rules {
				position: absolute;
				top: 12rpx;
				left: 56rpx;
				width: 63rpx;
				height: 31rpx;
				background-color: #282968;
				border-radius: 6rpx;
				font-size: 22rpx;
				line-height: 31rpx;
				text-align: center;
			}
			.wx-history {
				position: absolute;
				top: 54rpx;
				left: 36rpx;
				width: 106rpx;
				height: 43rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/wx/wx-history.png')
					no-repeat;
				background-size: contain;
				border-radius: 6rpx;
				font-size: 22rpx;
				line-height: 43rpx;
				font-weight: 700;
				color: #181340;
				text-align: center;
			}
			.my-reward {
				position: absolute;
				top: -32rpx;
				right: 18rpx;
				width: 133rpx;
				height: 133rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/my-gift.png')
					no-repeat;
				background-size: contain;
			}
			.content-top {
				font-size: 40rpx;
				line-height: 90rpx;
				font-weight: 800;
				text-align: center;
				font-style: italic;
				text-shadow: 2px 2px 2px $all-color;
			}
			.content-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 71%;
				padding: 0 20rpx;
				::v-deep .uni-noticebar {
					height: 25rpx;
					// margin-top: 18rpx;

					.uni-noticebar__content-text {
						font-size: 14rpx;
					}
				}
				.left {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 207rpx;
					height: 179rpx;
					background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-goods-left.png')
						no-repeat;
					background-size: 100%;
					.left-name {
						position: absolute;
						left: 39rpx;
						bottom: 16rpx;
						width: 134rpx;
						height: 25rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-name-left.png')
							no-repeat;
						background-size: 100%;
						font-size: 18rpx;
						text-align: center;
						line-height: 25rpx;
					}
				}
				.center {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 276rpx;
					height: 238rpx;
					background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-goods-mid.png')
						no-repeat;
					background-size: 100%;
					.center-name {
						position: absolute;
						left: 51rpx;
						bottom: 21rpx;
						width: 178rpx;
						height: 32rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-name-mid.png')
							no-repeat;
						background-size: 100%;
						font-size: 18rpx;
						text-align: center;
						line-height: 25rpx;

						::v-deep .uni-noticebar {
							height: 32rpx;
							// margin-top: 18rpx;

							.uni-noticebar__content-text {
								font-size: 20rpx;
							}
						}
					}
				}
				.right {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 207rpx;
					height: 179rpx;
					background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-goods-left.png')
						no-repeat;
					background-size: 100%;

					.right-name {
						position: absolute;
						left: 39rpx;
						bottom: 16rpx;
						width: 134rpx;
						height: 25rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/wx/top-name-left.png')
							no-repeat;
						background-size: 100%;
						font-size: 18rpx;
						text-align: center;
						line-height: 25rpx;
					}
				}
			}
		}
		.wx-center-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			position: relative;
			// top: -30rpx;
			z-index: 0;
			height: 76rpx;
			margin: 8rpx 0;
			box-sizing: border-box;
			background: url('https://ojqn.wm2177.com/wechat_imgs/wx/mid-content.png')
				no-repeat;
			background-size: 100%;
			.top-text {
				position: absolute;
				top: 106rpx;
				width: 436rpx;
				height: 40rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/wx/center-content-title.png')
					no-repeat;
				background-size: 100%;
			}
			.bottom-text {
				position: absolute;
				top: 22rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 26rpx;
				color: #fff3a5;
				text {
					&:first-child {
						display: inline-block;
						width: 116rpx;
						height: 32rpx;
						margin-right: 10rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/wx/hundrend.png')
							no-repeat;
						background-size: 100%;
						line-height: 28rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: normal;
						color: #fff;
					}
				}
			}
		}
		.probability {
			width: 100%;
			position: relative;
			top: -35rpx;
			text-align: center;
			font-size: 22rpx;
		}
		// 概率滑动
		.scroll-probability {
			.scroll-H-view {
				height: 76rpx;
				margin: 0 21rpx;
				box-sizing: border-box;
				background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-back.png')
					no-repeat;
				background-size: contain;
				overflow: hidden;
				.scroll-view_H {
					white-space: nowrap;
					width: 96%;
					margin: 0 12rpx;
					.scroll-view-item_H {
						position: relative;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 228rpx;
						height: 68rpx;
						background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pink.png')
							no-repeat;
						background-size: contain;
						text-align: center;
						// line-height: 86rpx;
						&:nth-child(2n) {
							background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-orange.png')
								no-repeat;
							background-size: 100%;
						}
						&:nth-child(3n) {
							background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-blue.png')
								no-repeat;
							background-size: 100%;
						}
						&:nth-child(4n) {
							background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pt.png')
								no-repeat;
							background-size: 100%;
						}

						.probability-top {
							margin-right: 10rpx;
							font-size: 26rpx;
							font-weight: 500;
						}
						.probability-bottom {
							font-size: 22rpx;
							font-weight: 500;
						}
					}
				}
			}
		}
		// 内容滑动
		.scroll-content {
			// .scroll-Y {
			width: 100%;
			// height: 38vh;
			.scroll-Y-view {
				width: 100%;
				padding: 0rpx 30rpx 0rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-evenly;
				.scroll-view-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					width: 224rpx;
					height: 265rpx;
					padding-top: 42rpx;
					padding-bottom: 22rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					// margin-right: 10rpx;
					&:nth-child(3n) {
						margin-right: 0;
					}
					.goodslist-name {
						height: 62rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						font-size: 20rpx;

						display: -webkit-box;
						-webkit-line-clamp: 1; /* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden; /* 隐藏超出部分 */
						text-overflow: ellipsis; /* 超出部分用省略号表示 */
						white-space: normal; /* 允许换行 */
						/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
					}
				}
			}
			// }
		}
		.wx-bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			z-index: 99;
			height: 230rpx;
			width: 100%;
			background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/bottom.png')
				no-repeat;
			background-size: 100%;

			.reservation {
				width: 700rpx;
				height: 120rpx;
			}

			.reservation-bg {
				background: url('https://ojqn.wm2177.com/wechat_imgs/is-presale.png')
					no-repeat;
				background-size: 100%;
			}
			.reservation-bg-ok {
				background: url('https://ojqn.wm2177.com/wechat_imgs/have-presale.png')
					no-repeat;
				background-size: 100%;
			}
			.abandon {
				width: 100%;
				margin-top: 4rpx;
				text-align: center;
				font-size: 22rpx;
				color: #cbcbf8;
			}
		}

		.rulepopup-content {
			height: 1117rpx;
			background-color: #1a133f;
			color: black;
		}

		.historypopup-content {
			position: relative;
			height: 76vh;
			padding: 25rpx 34rpx;
			box-sizing: border-box;
			background-color: #1a133f;
			.close-historypopup {
				position: absolute;
				top: 32rpx;
				right: 28rpx;
				width: 63rpx;
				height: 57rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/close.png')
					no-repeat;
				background-size: 100%;
			}

			.historypopup-content-title {
				margin-bottom: 50rpx;
				font-size: 44rpx;
				font-weight: 800;
				text-align: center;
				font-style: italic;
				text-shadow: 2px 2px 2px #7863ff;
			}
			.scroll-category {
				.scroll-H-view {
					height: 76rpx;
					// margin: 0 21rpx;
					box-sizing: border-box;
					// background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-back.png')
					// 	no-repeat;
					// background-size: contain;
					overflow: hidden;
					.scroll-view_H {
						white-space: nowrap;
						height: 66rpx;
						width: 100%;
						.scroll-view-item_H {
							position: relative;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 172rpx;
							height: 48rpx;
							background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-orange.png')
								no-repeat;
							background-size: contain;
							text-align: center;
							// line-height: 86rpx;

							.history-aim {
								position: absolute;
								bottom: -20rpx;
								left: 50%;
								transform: translateX(-50%);
								width: 20rpx;
								height: 20rpx;
								background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-orange.png')
									no-repeat;
								background-size: 100%;
							}
							&:nth-child(2n) {
								background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-pink.png')
									no-repeat;
								background-size: 100%;
								.history-aim {
									background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-pink.png')
										no-repeat;
									background-size: 100%;
								}
							}
							&:nth-child(3n) {
								background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-purple.png')
									no-repeat;
								background-size: 100%;
								.history-aim {
									background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-purple.png')
										no-repeat;
									background-size: 100%;
								}
							}
							&:nth-child(4n) {
								background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-blue.png')
									no-repeat;
								background-size: 100%;
								.history-aim {
									background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-blue.png')
										no-repeat;
									background-size: 100%;
								}
							}

							.probability-top {
								margin-right: 10rpx;
								font-size: 26rpx;
								font-weight: 500;
							}
							.probability-bottom {
								font-size: 22rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
			.history-list {
				.history-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 120rpx;
					margin-bottom: 10rpx;
					padding: 0 14rpx;
					box-sizing: border-box;
					background-color: #251d49;
					border-radius: 10rpx;
					font-size: 28rpx;
					.history-name {
						display: -webkit-box;
						-webkit-line-clamp: 1; /* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden; /* 隐藏超出部分 */
						text-overflow: ellipsis; /* 超出部分用省略号表示 */
						white-space: normal; /* 允许换行 */
						/* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
					}
				}
			}
		}
		.paypopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 771rpx;
			padding: 63rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(26, 19, 63, 0.9);
			color: #e1e1e1;
			.top-boxinfo {
				width: 100%;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				.boxinfo-left {
					width: 184rpx;
					height: 184rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 12rpx;
				}
				.boxinfo-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 180rpx;
				}
			}
			.choose-coupon {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 47rpx;
				flex-shrink: 0;
			}
			.pays {
				width: 100%;
				.pays-title {
					margin: 24rpx 0 13rpx 0;
					font-size: 24rpx;
				}
				.radio-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 13rpx 0;

					border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
					&:last-child {
						border: none;
					}
					.radio-item-left {
						display: flex;
						align-items: center;
					}
				}
			}
			.paybutton {
				width: 100%;
				height: 109rpx;
				margin-top: 32rpx;
				background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/paybutton.png')
					no-repeat;
				background-size: contain;
				font-weight: 800;
				font-size: 38rpx;
				color: #9146a0;
				line-height: 96rpx;
				text-align: center;
				// text-stroke: 1rpx #FFFFFF;
				// -webkit-text-stroke: 1rpx #FFFFFF;
			}
			.pays-agree {
				width: 100%;
				margin-top: 29rpx;
				font-size: 20rpx;
				color: #e1e1e1;
				text-align: center;
			}
		}
	}
</style>
